<script setup>
import IconSvg from "./IconSvg.vue";
const model = defineModel()
const { songsData, playSongBill } = defineProps({
  songsData: {
    type: Array,
    default: () => []
  },
  playSongBill: {
    type: Function,
    default: () => {
      return ()=>{}
    }
  }
})
</script>

<template>
  <div class="song-list-box">
    <div class="song-item" v-for="(item, index) in songsData" :key="index" @click="model = item._id">
      <img v-if="item.songs.length" :src="item.songs[0].cover" alt="">
      <div class="song-cover">
        <icon-svg name="play" @click="playSongBill(item.songs)"></icon-svg>
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .song-list-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 10px;

    .song-item{
      min-width: 100px;
      min-height: 100px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      background-color: rgba(78, 204, 163, 0.1);
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .song-cover{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        background-color: var(--titlebar-bg);
        font-size: 12px;
        padding: 5px;

        svg{
          cursor: pointer;
        }

        div{
          width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: right;
        }
      }
    }
  }
</style>